<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap的form表单布局</title>
		<!---引入jquery资源--->
		<script type="text/javascript" src="${basePath }js/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
		<!--引入bootstrap的核心js资源文件--->
		<script type="text/javascript" src="${basePath }js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<!--引入bootstrap的核心css资源文件--->
		<link rel="stylesheet" type="text/css" href="${basePath }js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<script type="text/javascript">
		//进行ajax异步请求处理
		function doAjaxGet(){
			// 请求的服务器url（等价于form表单的action属性值）
			var strUrl="../../AjaxDemoServlet";
			// get方法通过附加在url末尾的方式进行数据传参
			// 传输逇数据data
			var datas = "un="+document.getElementById("adminName").value
			           +"&upsw="+document.getElementById("adminPsw").value;	
			$.ajax({
				   // 请求类型
				   type: "POST",
				   // 服务器url
				   url: strUrl,
				   // 发送的数据
				   data: datas,
				   // 成功之后回调方法，方法的参数是服务器响应的内容也就是ajax引擎获取到responseText内容
				   success: function(respText){
				     $("#msg").html(respText);
				   },
				   error:function(){
					   alert("error...");
				   }
				});
		}
		//进行ajax异步请求处理
		function doGet(){
			// 请求的服务器url（等价于form表单的action属性值）
			var strUrl="../../AjaxDemoServlet";
			// get方法通过附加在url末尾的方式进行数据传参
			// 传输逇数据data
			/* var datas = {"un":document.getElementById("adminName").value
			           ,"upsw":document.getElementById("adminPsw").value};	 */
			// 传输逇数据data (json的字符串中需要使用双引号)
			var datas = '{"un":"'+document.getElementById('adminName').value
						           +'","upsw":"'+document.getElementById('adminPsw').value+'"}';
			console.info(datas);
			// 注意：使用eval函数将字符串转化为json对象时，需要在字符串前后加上();
			console.info(eval("("+datas+")"));           
			$.get(strUrl,JSON.parse(datas),function(respText){
				     $("#msg").html(respText);
				   },"text");
		}
		function doGet2(){
			// 请求的服务器url（等价于form表单的action属性值）
			var url="../../AjaxDemoServlet";
				// get方法通过附加在url末尾的方式进行数据传参
				// 附加用户名
				url=url+"?un="+document.getElementById("adminName").value;
				// 附加密码
				url=url+"&upsw="+document.getElementById("adminPsw").value;
				// 如果是get请求，ajax处理get请求时，之后当url内容一样时，只进行一次请求处理
				// 为了当url内容相同时可以进行多次get请求，一般会在url默认追加一个参数值为随机数或时间毫秒数
				url=url+"&s="+Math.random();       
			$.get(url,function(respText){
				     $("#msg").html(respText);
				   },"text");
		}
		//进行ajax异步请求处理
		function doPost(){
			// 请求的服务器url（等价于form表单的action属性值）
			var strUrl="../../AjaxDemoServlet";
			// get方法通过附加在url末尾的方式进行数据传参
			// 传输逇数据data
			var datas = {"un":document.getElementById("adminName").value
			           ,"upsw":document.getElementById("adminPsw").value};	
			        // 传输逇数据data
			/* var datas = "un="+document.getElementById("adminName").value
						           +"&upsw="+document.getElementById("adminPsw").value; */	 
			//console.info(JSON.stringify(datas));           
			$.post(strUrl,datas,function(respText){
				     $("#msg").html(respText);
				   },"text");
		}
		</script>
	</head>

	<body>
		<form class="form-horizontal">
			<div class="form-group">
			</div>
			<div class="form-group">
				<label for="txtName" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminName" name="adminName" placeholder="请输入用户名">
				</div>
				<label for="txtPsw" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="adminPsw" name="adminPsw" placeholder="请输入密码">
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-4 col-sm-1">
					<button type="button" class="btn btn-default" onclick="doGet();">登&nbsp;&nbsp;录</button>
				</div>
				<div class="col-sm-offset-1 col-sm-1">
					<button type="button" class="btn btn-default">取&nbsp;&nbsp;消</button>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-3">
					<p id="msg">登录成功</p>
				</div>
			</div>	
		</form>
	</body>

</html>